Update profiles #1388
Update profiles #1388
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughIn this update, there are significant enhancements and feature additions across multiple packages. Key changes include the introduction of user profile management functionality, updated interface properties, new components for profile handling, modifications in import statements for cleaner code, improved localization support, and updated account visibility settings. This broadens the extension's capabilities, improving user experience with more personalized and organized account handling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Extension
participant ProfileMenu
participant Messaging
participant LocalStorage
User->>Extension: Opens Profile Menu
Extension->>ProfileMenu: Renders ProfileMenu Component
ProfileMenu->>LocalStorage: Fetches Existing Profiles
LocalStorage-->>ProfileMenu: Returns Profiles List
ProfileMenu-->>User: Displays Profiles List
User->>ProfileMenu: Adds/Edits/Removes Profile
ProfileMenu->>Messaging: Sends Profile Update Request
Messaging->>LocalStorage: Updates Profile in Storage
LocalStorage-->>Messaging: Confirms Update
Messaging-->>ProfileMenu: Acknowledges Update
ProfileMenu-->>User: Reflects Profile Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Outside diff range and nitpick comments (3)
packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx (1)
Line range hint
23-204: Address the shadowing issue with the global 'Proxy' propertyThe static analysis tool has flagged a shadowing issue with the global 'Proxy' property. This could lead to confusion or unexpected behaviors in different environments. Consider renaming the imported
Proxytype to avoid this issue.Also, the logic for handling the display of icons based on the account's features is implemented correctly, but ensure that the error handling is robust, especially for asynchronous operations.
- import type { Proxy } from '../../../util/types'; + import type { Proxy as ProxyType } from '../../../util/types';packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx (1)
Line range hint
15-206: Optimize conditional logic and address static analysis hintThe component handles various account-related actions and displays them as menu items. The logic for disabling menu items based on the supported chains is good, but the static analysis tool has flagged an unnecessary
elseclause. This should be addressed to simplify the code.Also, consider optimizing the conditional rendering to make the code cleaner and more maintainable.
- const isDisable = useCallback((supportedChains: string[]) => { - if (!chain) { - return true; - } else { - return !supportedChains.includes(chain.genesisHash ?? ''); - } - }, [chain]); + const isDisable = useCallback( + (supportedChains: string[]) => !chain || !supportedChains.includes(chain.genesisHash ?? ''), + [chain] + );packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx (1)
Line range hint
144-247: Refactor to improve readability and maintainability.The function
AccountInformationForDetailsis complex and could benefit from breaking down into smaller components or hooks. Additionally, consider removing unnecessary else clauses as suggested by static analysis to simplify the logic.- } else { + }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (26)
- packages/extension-base/src/background/types.ts (1 hunks)
- packages/extension-polkagate/src/components/Identity.tsx (1 hunks)
- packages/extension-polkagate/src/components/MenuItem.tsx (3 hunks)
- packages/extension-polkagate/src/components/ProfileInput.tsx (1 hunks)
- packages/extension-polkagate/src/components/index.ts (2 hunks)
- packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx (6 hunks)
- packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx (3 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx (5 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx (6 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTab.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabs.tsx (1 hunks)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SimpleModalTitle.tsx (1 hunks)
- packages/extension-polkagate/src/hooks/index.ts (1 hunks)
- packages/extension-polkagate/src/hooks/useProfileAccounts.tsx (1 hunks)
- packages/extension-polkagate/src/hooks/useProfiles.ts (1 hunks)
- packages/extension-polkagate/src/messaging.ts (1 hunks)
- packages/extension-polkagate/src/popup/home/AccountDetail.tsx (1 hunks)
- packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx (5 hunks)
- packages/extension/public/locales/en/translation.json (1 hunks)
- packages/extension/public/locales/fr/translation.json (1 hunks)
- packages/extension/public/locales/hi/translation.json (1 hunks)
- packages/extension/public/locales/ru/translation.json (1 hunks)
- packages/extension/public/locales/zh/translation.json (1 hunks)
Files not reviewed due to errors (2)
- packages/extension-polkagate/src/components/MenuItem.tsx (no review received)
- packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx (no review received)
Files skipped from review due to trivial changes (5)
- packages/extension-polkagate/src/components/index.ts
- packages/extension-polkagate/src/hooks/index.ts
- packages/extension-polkagate/src/popup/home/AccountDetail.tsx
- packages/extension/public/locales/fr/translation.json
- packages/extension/public/locales/zh/translation.json
Additional context used
Biome
packages/extension-polkagate/src/hooks/useProfileAccounts.tsx
[error] 36-36: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause. (lint/correctness/noSwitchDeclarations)The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
[error] 39-39: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause. (lint/correctness/noSwitchDeclarations)The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
[error] 42-42: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause. (lint/correctness/noSwitchDeclarations)The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
[error] 45-45: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause. (lint/correctness/noSwitchDeclarations)The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
[error] 48-48: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause. (lint/correctness/noSwitchDeclarations)The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTab.tsx
[error] 81-81: Avoid redundant
Booleancall (lint/complexity/noExtraBooleanCast)It is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancallpackages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx
[error] 7-7: Do not shadow the global "Proxy" property. (lint/suspicious/noShadowRestrictedNames)
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx
[error] 72-74: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/extension-polkagate/src/messaging.ts
[error] 168-180: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 50-50: Don't use 'Function' as a type. (lint/complexity/noBannedTypes)
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx
[error] 70-74: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 82-84: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
[error] 160-167: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 173-175: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/extension-base/src/background/types.ts
[error] 117-117: void is confusing outside a return type or a type parameter. (lint/suspicious/noConfusingVoidType)
Unsafe fix: Use undefined instead.
[error] 118-118: void is confusing outside a return type or a type parameter. (lint/suspicious/noConfusingVoidType)
Unsafe fix: Use undefined instead.
[error] 143-143: void is confusing outside a return type or a type parameter. (lint/suspicious/noConfusingVoidType)
Unsafe fix: Use undefined instead.
GitHub Check: build
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabs.tsx
[failure] 54-54:
Not all code paths return a value.packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx
[failure] 7-7:
'useMemo' is declared but its value is never read.
Additional comments not posted (36)
packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabs.tsx (2)
4-13: Review of import statements and component propsThe import statements are well-organized, and the interface
Propsis clearly defined, which is good for maintainability.
17-65: Ensure proper handling of missing return value in useEffectThe static analysis tool has flagged that not all code paths in the
useEffecthook return a value. This is a common issue with useEffect where it's expected not to return anything other than a cleanup function. The current implementation seems correct as it properly handles the cleanup of event listeners.However, ensure that the comment from the static analysis tool is addressed or clarified if it's a false positive.
Verification successful
Let's correct the regex pattern to properly match the
useEffecthook usage and rerun the verification script.
Let's adjust the file type to
tsxand rerun the verification script to check theuseEffectusage.
Let's adjust the search to include files with the
.tsxextension directly and rerun the verification script to check theuseEffectusage.
Ensure proper handling of missing return value in useEffect
The static analysis tool flagged that not all code paths in the
useEffecthook return a value. However, the current implementation correctly handles the cleanup of event listeners, which is the expected behavior foruseEffect. The verification confirms that no improper return values are present.
- No issues found with the
useEffectimplementation in the provided code snippet.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the useEffect usage in ProfileTabs.tsx # Test: Search for useEffect usage. Expect: Proper usage without required return values. rg --type typescript --multiline $'useEffect\\(\\(\\) => {[^}]*}, \\[\\]\\)'Length of output: 208
Script:
#!/bin/bash # Description: Verify the useEffect usage in ProfileTabs.tsx # Test: Search for useEffect usage. Expect: Proper usage without required return values. rg --type typescript --multiline 'useEffect\(\(\) => \{[^}]*\}, \[\]\)'Length of output: 108
Script:
#!/bin/bash # Description: Verify the useEffect usage in ProfileTabs.tsx # Test: Search for useEffect usage. Expect: Proper usage without required return values. rg --type tsx --multiline 'useEffect\(\(\) => \{[^}]*\}, \[\]\)'Length of output: 94
Script:
#!/bin/bash # Description: Verify the useEffect usage in ProfileTabs.tsx # Test: Search for useEffect usage in .tsx files. Expect: Proper usage without required return values. rg --multiline 'useEffect\(\(\) => \{[^}]*\}, \[\]\)' --glob '*.tsx'Length of output: 4849
Tools
GitHub Check: build
[failure] 54-54:
Not all code paths return a value.packages/extension-polkagate/src/components/ProfileInput.tsx (1)
4-18: Review of import statements and component propsThe import statements are well-organized, and the interface
Propsis clearly defined, which is good for maintainability.packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTab.tsx (1)
4-20: Review of import statements and component propsThe import statements are well-organized, and the interface
Propsis clearly defined, which is good for maintainability.packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx (1)
Line range hint
1-22: Review of import statements and component propsThe import statements are well-organized, and the interface
Propsis clearly defined, which is good for maintainability.packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx (1)
Line range hint
1-14: Review of import statements and component propsThe import statements are well-organized, and the interface
Propsis clearly defined, which is good for maintainability.packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx (1)
57-217: General Review ofProfileMenuComponent
Functionality and Structure: The component seems well-structured to handle profile management functionality, including adding and removing profiles. The use of React hooks like
useCallbackanduseStateis appropriate for managing state and memoizing functions.Error Handling: Good use of
.catch(console.error)for promise rejections. However, consider enhancing error handling by providing user feedback or retry mechanisms in the UI.Performance: The use of
React.memoat the end of the file is a good practice to prevent unnecessary re-renders of the component.Accessibility: Ensure that interactive elements like buttons are accessible, including proper ARIA attributes and keyboard navigation support.
Styling: Inline styles are used (
sxprop on MUI components), which is fine for smaller components but consider using theme-based styles or CSS modules for larger projects to improve maintainability.Overall, the component is well-built with attention to performance and modularity. However, consider enhancing error handling and accessibility features.
packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx (1)
79-99: Review ofcreateProxidsFunction
Functionality: The function handles the creation of proxied accounts and optionally adds them to a profile. The use of async/await syntax is appropriate.
Error Handling: The function catches and logs errors but consider providing user feedback in the UI for better user experience.
Performance: The function iterates over
selectedProxiedand makes asynchronous calls within a loop. This is generally fine, but ensure that this does not lead to performance bottlenecks or rate limits being hit on the backend.Best Practices: The use of template literals and JSON for metadata construction is good. However, consider abstracting some of the logic into smaller functions or hooks to improve readability and reusability.
Overall, the function is well-implemented with proper asynchronous handling and error logging. Consider enhancing user feedback and refactoring for better readability.
packages/extension-polkagate/src/components/Identity.tsx (1)
24-24: Review of Props Interface ChangesThe optional chaining (
?) added toaccountInfoin thePropsinterface allows the component to handle cases whereaccountInfomight benull. This is a good practice for robustness and helps prevent runtime errors in scenarios where account information might not be available.packages/extension-polkagate/src/messaging.ts (1)
75-75: Addition ofupdateMetaFunctionThe
updateMetafunction is a valuable addition for updating metadata associated with accounts. It uses the establishedsendMessagepattern which is consistent with the rest of the module. Ensure that all error handling and edge cases are considered in the implementation.packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx (2)
131-142: Approve the implementation ofEyeIconFullScreen.The function correctly toggles the visibility icon based on the
isHiddenstate and uses theme colors appropriately.
247-247: Verify the necessity of type casting inSelectedAssetBox.The casting of
selectedAssettoBalancesInfomight indicate discrepancies in type definitions or data handling. Consider refining the type definitions to ensure consistency and prevent potential runtime errors.packages/extension-base/src/background/types.ts (1)
57-57: Approve the addition of theprofilefield toAccountJson.The new optional field
profileis a relevant addition for enhanced profile management functionality.packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx (1)
35-42: Approve the conversion ofpopupNumbersto an enum.Converting
popupNumbersto an enum enhances type safety and clarity, aligning with best practices in TypeScript.packages/extension/public/locales/en/translation.json (10)
1292-1292: New Localization String Added: "Profile Name"This string is relevant for the new profile management features, allowing users to label profiles distinctly.
1293-1293: New Localization String Added: "New profile"This string supports the functionality of creating new profiles, aligning with the PR's feature to manage multiple user profiles.
1294-1294: New Localization String Added: "No user profile"This string is useful for scenarios where no profiles exist, which is important for initial user interaction or error handling in the profile management UI.
1295-1295: New Localization String Added: "Add to profile"This string supports the feature allowing users to add accounts or settings to specific profiles, a key part of the enhanced profile management system.
1297-1297: New Localization String Added: "This account is visible to websites"This string is likely used to inform users about privacy settings related to account visibility on websites. It's crucial for user privacy awareness.
1298-1298: New Localization String Added: "Choose a name for the profile"This string facilitates user interaction by providing a clear instruction within the UI, specifically in the context of naming profiles, which is a part of the new profile management functionality.
[APROVED]
1299-1299: New Localization String Added: "Remove from {{profileName}} profile"This dynamic string is crucial for managing profiles, specifically for removing elements or settings from a specific profile. The use of a placeholder (
{{profileName}}) enhances flexibility and user experience by dynamically inserting the profile's name.
1300-1300: New Localization String Added: "You can add your imported proxied accounts to a profile if you wish. If not, they'll be visible in 'All' and 'Watch-only' profiles."This string provides guidance to users on how to manage their proxied accounts with respect to profiles, aligning well with the new profile management features.
1301-1301: New Localization String Added: "Choose a profile name:"This string is straightforward and provides a clear call to action for users when setting up or modifying profiles, which is a key part of the profile management enhancements.
1296-1296: New Localization String Added: "Local"This string seems ambiguous without additional context. It could refer to local storage, local accounts, or something else. It's important to ensure that this string is used consistently within the application and that its meaning is clear to the end users.
packages/extension/public/locales/hi/translation.json (11)
1281-1281: New localized string for "Reserved Reasons"The translation seems appropriate and consistent with the context.
1282-1282: New localized string for "Profile Name"The translation for "Profile Name" is accurate and clear.
1283-1283: New localized string for "New profile"The translation for "New profile" is correct and straightforward, fitting the context.
1284-1284: New localized string for "No user profile"This string is translated correctly and will be clear to the user.
1285-1285: New localized string for "Add to profile"The translation is accurate and maintains the intended meaning.
1286-1286: New localized string for "Local"The word "Local" has been translated appropriately.
1287-1287: New localized string for account visibilityThe translation for "This account is visible to websites" is correctly localized.
1288-1288: New localized string for choosing a profile nameThe string "Choose a name for the profile" is accurately translated and fits the user interface context.
1289-1289: New localized string for removing from a profileThe translation for "Remove from {{profileName}} profile" is dynamically structured and correctly localized.
1290-1290: New localized string for adding imported proxied accounts to a profileThe translation is lengthy but maintains clarity and provides the necessary information succinctly.
1291-1291: New localized string for choosing a profile name"Choose a profile name:" is translated correctly and is consistent with the interactive element it represents.
packages/extension/public/locales/ru/translation.json (1)
1280-1289: Add new translations related to profile management.The newly added translations from line 1280 to 1289 handle various profile-related functionalities such as creating new profiles, adding accounts to profiles, and managing no user profile scenarios. Ensure these translations are consistent with the context of the application and are clear and concise.
| import React, { useCallback, useContext, useState } from 'react'; | ||
|
|
||
| import { Divider, Grid, Popover, useTheme, IconButton, type Theme } from '@mui/material'; | ||
| import React, { useCallback, useContext, useMemo, useState } from 'react'; |
There was a problem hiding this comment.
Remove unused import: useMemo
The import useMemo is declared but never used in the file. Removing unused imports can help keep the codebase clean and maintainable.
- import React, { useCallback, useContext, useMemo, useState } from 'react';
+ import React, { useCallback, useContext, useState } from 'react';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import React, { useCallback, useContext, useMemo, useState } from 'react'; | |
| import React, { useCallback, useContext, useState } from 'react'; |
Tools
GitHub Check: build
[failure] 7-7:
'useMemo' is declared but its value is never read.
| export default function useProfiles(): Profiles { | ||
| const { accounts } = useContext(AccountContext); | ||
|
|
||
| return useMemo(() => { | ||
| if(!accounts){ | ||
| return; | ||
| } | ||
|
|
||
| // default profiles | ||
| const texts = ['All']; | ||
| const hasLocal = accounts.find(({ isExternal }) => !isExternal) | ||
| if (hasLocal) { | ||
| texts.push('Local') | ||
| } | ||
|
|
||
| const hasLedger = accounts.find(({ isHardware }) => isHardware) | ||
| if (hasLedger) { | ||
| texts.push('Ledger') | ||
| } | ||
|
|
||
| const hasWatchOnly = accounts.find(({ isExternal, isQR, isHardware }) => isExternal && !isQR && !isHardware); | ||
| if (hasWatchOnly) { | ||
| texts.push('Watch-only') | ||
| } | ||
|
|
||
| const hasQrAttached = accounts.find(({ isQR }) => isQR); | ||
| if (hasQrAttached) { | ||
| texts.push('QR-attached') | ||
| } | ||
|
|
||
| // user defined profiles | ||
| const profiles = accounts.map(({ profile }) => profile).filter(Boolean) as string[]; | ||
| return [...new Set(profiles)].sort(); | ||
|
|
||
| return { | ||
| userDefinedProfiles: [...new Set(profiles)].sort(), | ||
| defaultProfiles: texts | ||
| }; | ||
| }, [accounts]); | ||
| } |
There was a problem hiding this comment.
Optimize the use of useMemo in useProfiles.
The useProfiles function uses useMemo effectively to compute user-defined and default profiles based on the accounts. The dependencies array correctly includes accounts, ensuring that the memoized value is recomputed only when accounts changes. The segregation between default and user-defined profiles is clear and follows a logical structure. However, consider handling the case where accounts is undefined more explicitly to return an empty profiles object instead of undefined to maintain consistent return types.
return useMemo(() => {
if(!accounts){
- return;
+ return { userDefinedProfiles: [], defaultProfiles: [] };
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default function useProfiles(): Profiles { | |
| const { accounts } = useContext(AccountContext); | |
| return useMemo(() => { | |
| if(!accounts){ | |
| return; | |
| } | |
| // default profiles | |
| const texts = ['All']; | |
| const hasLocal = accounts.find(({ isExternal }) => !isExternal) | |
| if (hasLocal) { | |
| texts.push('Local') | |
| } | |
| const hasLedger = accounts.find(({ isHardware }) => isHardware) | |
| if (hasLedger) { | |
| texts.push('Ledger') | |
| } | |
| const hasWatchOnly = accounts.find(({ isExternal, isQR, isHardware }) => isExternal && !isQR && !isHardware); | |
| if (hasWatchOnly) { | |
| texts.push('Watch-only') | |
| } | |
| const hasQrAttached = accounts.find(({ isQR }) => isQR); | |
| if (hasQrAttached) { | |
| texts.push('QR-attached') | |
| } | |
| // user defined profiles | |
| const profiles = accounts.map(({ profile }) => profile).filter(Boolean) as string[]; | |
| return [...new Set(profiles)].sort(); | |
| return { | |
| userDefinedProfiles: [...new Set(profiles)].sort(), | |
| defaultProfiles: texts | |
| }; | |
| }, [accounts]); | |
| } | |
| export default function useProfiles(): Profiles { | |
| const { accounts } = useContext(AccountContext); | |
| return useMemo(() => { | |
| if(!accounts){ | |
| return { userDefinedProfiles: [], defaultProfiles: [] }; | |
| } | |
| // default profiles | |
| const texts = ['All']; | |
| const hasLocal = accounts.find(({ isExternal }) => !isExternal) | |
| if (hasLocal) { | |
| texts.push('Local') | |
| } | |
| const hasLedger = accounts.find(({ isHardware }) => isHardware) | |
| if (hasLedger) { | |
| texts.push('Ledger') | |
| } | |
| const hasWatchOnly = accounts.find(({ isExternal, isQR, isHardware }) => isExternal && !isQR && !isHardware); | |
| if (hasWatchOnly) { | |
| texts.push('Watch-only') | |
| } | |
| const hasQrAttached = accounts.find(({ isQR }) => isQR); | |
| if (hasQrAttached) { | |
| texts.push('QR-attached') | |
| } | |
| // user defined profiles | |
| const profiles = accounts.map(({ profile }) => profile).filter(Boolean) as string[]; | |
| return { | |
| userDefinedProfiles: [...new Set(profiles)].sort(), | |
| defaultProfiles: texts | |
| }; | |
| }, [accounts]); | |
| } |
| return ( | ||
| <Grid container sx={{ position: 'relative', overflow: 'auto', height: '30px', pb: '10px' }}> | ||
| <Grid container sx={{ display: 'flex', position: 'relative', height: '30px', mb: '10px' }}> | ||
| {showLeftMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', transform: 'rotate(-180deg)', width: 'fit-content', zIndex: 1 }} />} | ||
| <Grid container item justifyContent='left' | ||
| onMouseEnter={onMouseEnter} | ||
| onMouseLeave={onMouseLeave} | ||
| columnGap='5px' | ||
| sx={{ | ||
| bgcolor: 'backgroundFL.secondary', | ||
| flexWrap: 'nowrap', | ||
| maxWidth: '1282px', | ||
| px: '20px', | ||
| position: 'relative', | ||
| transition: 'transform 0.3s ease-in-out', | ||
| transform: `translateY(-${HIDDEN_PERCENT})`, | ||
| '&:hover': { | ||
| transform: 'translateY(0%)' | ||
| } | ||
| }}> | ||
| px: '25px', | ||
| pb: '5px', | ||
| flexFlow: 'nowrap', | ||
| overflowX: 'scroll', | ||
| whiteSpace: 'nowrap' | ||
| }} | ||
| ref={scrollContainerRef} | ||
| xs | ||
| > | ||
| { | ||
| profiles?.map((profile, index) => ( | ||
| profilesToShow?.map((profile, index) => ( | ||
| <ProfileTab | ||
| selectedProfile={selectedProfile} | ||
| setSelectedProfile={setSelectedProfile} | ||
| key={index} | ||
| index={index} | ||
| isHovered={isHovered} | ||
| text={profile as string} | ||
| orderedAccounts={orderedAccounts} | ||
| /> | ||
| )) | ||
| } | ||
| </Grid > | ||
| </Grid> | ||
| {showRightMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', width: 'fit-content', zIndex: 1 }} />} | ||
| </Grid> | ||
| ); |
There was a problem hiding this comment.
Optimize profile selection logic
The logic for handling profile selection and UI interactions is implemented correctly. However, there could be optimizations in how profiles are managed and displayed, especially with the conditional rendering logic in the JSX.
Consider simplifying the conditional rendering to enhance readability and potentially improve performance by reducing re-renders.
- {showLeftMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', transform: 'rotate(-180deg)', width: 'fit-content', zIndex: 1 }} />}
+ <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', transform: showLeftMore ? 'rotate(-180deg)' : 'rotate(0deg)', width: 'fit-content', zIndex: 1 }} />Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <Grid container sx={{ position: 'relative', overflow: 'auto', height: '30px', pb: '10px' }}> | |
| <Grid container sx={{ display: 'flex', position: 'relative', height: '30px', mb: '10px' }}> | |
| {showLeftMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', transform: 'rotate(-180deg)', width: 'fit-content', zIndex: 1 }} />} | |
| <Grid container item justifyContent='left' | |
| onMouseEnter={onMouseEnter} | |
| onMouseLeave={onMouseLeave} | |
| columnGap='5px' | |
| sx={{ | |
| bgcolor: 'backgroundFL.secondary', | |
| flexWrap: 'nowrap', | |
| maxWidth: '1282px', | |
| px: '20px', | |
| position: 'relative', | |
| transition: 'transform 0.3s ease-in-out', | |
| transform: `translateY(-${HIDDEN_PERCENT})`, | |
| '&:hover': { | |
| transform: 'translateY(0%)' | |
| } | |
| }}> | |
| px: '25px', | |
| pb: '5px', | |
| flexFlow: 'nowrap', | |
| overflowX: 'scroll', | |
| whiteSpace: 'nowrap' | |
| }} | |
| ref={scrollContainerRef} | |
| xs | |
| > | |
| { | |
| profiles?.map((profile, index) => ( | |
| profilesToShow?.map((profile, index) => ( | |
| <ProfileTab | |
| selectedProfile={selectedProfile} | |
| setSelectedProfile={setSelectedProfile} | |
| key={index} | |
| index={index} | |
| isHovered={isHovered} | |
| text={profile as string} | |
| orderedAccounts={orderedAccounts} | |
| /> | |
| )) | |
| } | |
| </Grid > | |
| </Grid> | |
| {showRightMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', width: 'fit-content', zIndex: 1 }} />} | |
| </Grid> | |
| ); | |
| return ( | |
| <Grid container sx={{ display: 'flex', position: 'relative', height: '30px', mb: '10px' }}> | |
| <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', transform: showLeftMore ? 'rotate(-180deg)' : 'rotate(0deg)', width: 'fit-content', zIndex: 1 }} /> | |
| <Grid container item justifyContent='left' | |
| onMouseEnter={onMouseEnter} | |
| onMouseLeave={onMouseLeave} | |
| columnGap='5px' | |
| sx={{ | |
| bgcolor: 'backgroundFL.secondary', | |
| px: '25px', | |
| pb: '5px', | |
| flexFlow: 'nowrap', | |
| overflowX: 'scroll', | |
| whiteSpace: 'nowrap' | |
| }} | |
| ref={scrollContainerRef} | |
| xs | |
| > | |
| { | |
| profilesToShow?.map((profile, index) => ( | |
| <ProfileTab | |
| selectedProfile={selectedProfile} | |
| setSelectedProfile={setSelectedProfile} | |
| key={index} | |
| index={index} | |
| isHovered={isHovered} | |
| text={profile as string} | |
| orderedAccounts={orderedAccounts} | |
| /> | |
| )) | |
| } | |
| </Grid> | |
| {showRightMore && <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '20px', width: 'fit-content', zIndex: 1 }} />} | |
| </Grid> | |
| ); |
Updates
Summary by CodeRabbit
New Features
ProfileInputcomponent for selecting and displaying user profiles.Enhancements
Bug Fixes
Localization